<template>
  <div class="box orderBox">
    <van-nav-bar
      title="我的订单"
      right-text="开发票"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/#')"
      @nav-bar-text-color="'black'"
    />
    <van-tabs v-model="active" title-active-color="#f391a9">
      <van-tab title="全部">
        <div class="orderList" v-for="item in tobePaid" :key="item.orderId">
          <h5>{{item.time}}</h5>
          <div class="orderPro">
            <van-card
              V-for="data in item.proData"
              :key="data.proID"
              :num="data.num"
              :price="data.price"
              :title="data.proName"
              :thumb="data.img"
            />
          </div>
          <van-submit-bar button-text="去支付" @submit="onSubmit" />
        </div>
      </van-tab>
      <van-tab title="待支付"></van-tab>
      <van-tab title="待配送"></van-tab>
      <van-tab title="配送中"></van-tab>
      <van-tab title="待评价"></van-tab>
    </van-tabs>
    <div class="contentArea">
      <img src="../../../public/img/icons/order.jpg">
      <h3><span>—</span>&nbsp;猜你喜欢&nbsp;<span>—</span></h3>
    </div>
  </div>
</template>
<script>
import { getOrder } from '@/api/request.js'
import Vue from 'vue'
import { NavBar, Tab, Tabs, Card, SubmitBar } from 'vant'

Vue.use(NavBar)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Card)
Vue.use(SubmitBar)

export default {
  beforeRouteEnter (to, from, next) {
    console.log(sessionStorage.getItem('isLogin'))
    // 因为session没拿到东西  所以走了else  导致直接跳到了登录页
    if (sessionStorage.getItem('isLogin') === 'ok') {
      next()
    } else {
      console.log(222)
      next()
      // next('/login?from' + from.name)
    }
  },
  data () {
    return {
      active: 0,
      orderList: [],
      tobePaid: [],
      tobeDelivered: [],
      inDelivery: [],
      tobeEvaluated: []
    }
  },
  mounted () {
    getOrder({
      ueserId: sessionStorage.getItem('userId')
    }).then(data => {
      if (data) {
        this.orderList = data.data.msg
      }
    })
  }
}
</script>

<style>
.van-nav-bar__text {
  color: #000000;
}
.van-tab__text {
  font-weight: bolder;
}
.contentArea {
 background-color:rgb(245, 245, 245);
}
.contentArea img{
  display: block;
  width: 60vw;
  height:60vw;
  margin:30px auto;
}
.contentArea h3{
  display: block;
  text-align: center;
  letter-spacing:1vw;
}
.contentArea span{
  color:rgb(220, 220, 220);
}
</style>
